import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>我是副标题</span></span></h1>
// 一、列表渲染
// 将列表拼成数组放在模版中，将数据拼成数组放在jsx对象中
// 通过数组map方法对每一个项目按照jsx对象对形式进行加工，最终得到一个每一项都是jsx对象对数组，
// 再将数组渲染到模版中
// key值需要放到每一项中

class ListItem extends React.Component{
  constructor(props){
    super(props);
    // this.getClassInfo=this.getClassInfo.bind(this);
  };
  getClassInfo(index,title,content){
    console.log(index,title,content);
  }
  render(){
    return (
      <div className='listItem' onClick={function () {this.getClassInfo(this.props.index,this.props.title,this.props.content)  }.bind(this)}>
        <title>我是列表项：{this.props.index}</title>
        <p>课程名称：{this.props.title}</p>
        <span>课程内容：{this.props.content}</span>
      </div>
    )
  }
}
class ListWrap extends  React.Component{
  constructor(props){
    super(props);
    this.state={
      classLists:[
        {
          title:"大学英语",
          content:'hello word!English!'
        },
        {
          title:'高等数学',
          content:'hello Math!'
        },
        {
          title:'毛泽东概论',
          content:'hello Maozd！'
        },
        {
          title:'计算机与网络',
          content:'hello Javascript!'
        }
      ]
    }
  };
  getClassInfo2=(index,title,content)=>{
    console.log(`${index}----${title}---${content}`);
  }
  render(){
    let listArr = this.state.classLists.map((item,index)=>{
      return <ListItem index={index} title={item.title} content={item.content} key={index}/>
    });
    // return (//第一种方式
    //   <div>
    //     <h4>这是列表渲染案例---第一种复杂组件渲染到方式</h4>
    //     <div>{listArr}</div>
    //     <span>感谢使用</span>
    //   </div>
    // );
    return (//第二种方式
      <div>
         <h4>这是列表渲染案例---第二种渲染到方式</h4>
        <div>{
          this.state.classLists.map((item,index)=>{
            return (
              <div className='listItem' onClick={function () {this.getClassInfo2(index,item.title,item.content)  }.bind(this)} key={index}>
                <title>我是列表项：{item.index}</title>
                <p>课程名称：{item.title}</p>
                <span>课程内容：{item.content}</span>
              </div>
            )
          })
          }</div>
        <span>感谢使用</span>
      </div>
    )
  }

}

ReactDOM.render(
  <ListWrap/>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
